<template>
  <view class="product-detail">
    <go-back></go-back>
    <swiper
      class="product-swiper"
      :indicator-dots="true"
      :autoplay="false"
      :interval="3000"
      :duration="500"
    >
      <swiper-item v-for="(image, index) in imageList" :key="index">
        <image
          class="product-image"
          :src="image"
          mode="aspectFill"
          @tap="previewImage(index)"
        ></image>
      </swiper-item>
    </swiper>
    <view class="product-info">
      <view class="product-name-price">
        <text class="product-name">{{ product.productName }}</text>
        <text class="product-price">
          <text class="currency">¥</text>
          <text class="price-value">{{ product.price }}</text>
        </text>
      </view>
      <view class="product-description">
        <text>{{ product.description }}</text>
      </view>
      <view class="product-specifications">
        <view class="specs-title">规格参数</view>
        <view class="specs-list">
          <view
            class="spec-item"
            v-for="(value, key) in product.specifications"
            :key="key"
          >
            <text class="spec-label">{{ getSpecLabel(key) }}</text>
            <text class="spec-value">{{ value }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="chat-button-container">
      <view class="chat-button" @tap="goToChat">
        <image
          src="/static/chat/messages-square.png"
          mode="aspectFit"
          class="chat-icon"
        ></image>
        <text>我想要</text>
      </view>
    </view>
  </view>
</template>

<script>
import GoBack from "@/components/GoBack.vue";
export default {
  components: {
    GoBack,
  },
  data() {
    return {
      product: {},
      imageList: [
        // "https://www.tradingplatformapp.com/files/test.jpg",
        // "https://www.tradingplatformapp.com/files/test.jpg",
        // "https://www.tradingplatformapp.com/files/test.jpg",
        // "https://www.tradingplatformapp.com/files/test.jpg",
        // "https://www.tradingplatformapp.com/files/test.jpg",
        // "https://www.tradingplatformapp.com/files/test.jpg",
      ],
    };
  },
  methods: {
    previewImage(current) {
      uni.previewImage({
        urls: this.imageList,
        current: this.imageList[current],
      });
    },
    getSpecLabel(key) {
      const specLabels = {
        color: "颜色",
        length: "长度",
        weight: "重量",
        diameter: "直径",
        material: "材质",
      };
      return specLabels[key] || key;
    },
    goToChat() {
      // 将商品信息编码后作为参数传递
      const productInfo = encodeURIComponent(JSON.stringify(this.product));
      uni.navigateTo({
        url: `/pages/chat/chat?product=${productInfo}`,
      });
    },
  },
  onLoad(options) {
    // 从页面参数中获取商品数据
    if (options.product) {
      this.product = JSON.parse(decodeURIComponent(options.product));
      this.imageList = this.product.imageUrls;
    }
  },
};
</script>

<style lang="scss">
.product-detail {
  height: 100%;
  background-color: #fff;
  padding-bottom: 120rpx; // 为底部按钮留出空间
  /* #ifdef MP-WEIXIN */
  // padding-top: calc(var(--status-bar-height) + 120rpx);
  /* #endif */

  .product-swiper {
    width: 100%;
    height: 750rpx;
  }

  .product-image {
    width: 100%;
    height: 100%;
  }

  .product-info {
    padding: 30rpx;

    .product-name-price {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .product-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .product-price {
      font-size: 40rpx;
      color: #ff6b6b;
      font-weight: bold;

      .currency {
        font-size: 28rpx;
        margin-right: 4rpx;
      }
    }

    .product-description {
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }

    .product-specifications {
      margin-top: 40rpx;
      padding-top: 30rpx;
      border-top: 1rpx solid #eee;

      .specs-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .specs-list {
        .spec-item {
          display: flex;
          justify-content: space-between;
          padding: 20rpx 0;
          font-size: 28rpx;

          .spec-label {
            color: #666;
          }

          .spec-value {
            color: #333;
          }
        }
      }
    }
  }
}

.chat-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  .chat-button {
    flex: 1;
    height: 100%;
    border-radius: 200rpx;
    background-color: #ffe60f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    /* #ifdef MP-WEIXIN */
    bottom: calc(var(--status-bar-height));
    /* #endif */

    .chat-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    text {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }
}
</style>
